<script>
import CustomFixDialog from '@/portal4.1/pc/component/common/Dialog/common/CustomFixDialog.vue'
import { dialog } from '@/mixins/dialog'
import { layout } from '@/mixins/layout'
import { requestGet } from '@/api/system/common'

/* eslint-disable */
export default {
  // 用户收藏信息
  name: 'CollectDialog',
  components: { CustomFixDialog },
  mixins: [dialog, layout],
  data() {
    return {
      active: 0,
      noticeTitle: '服务收藏',
      checked: false,
      checkList: [],
      radio: 1,
      baseURL: process.env.VUE_APP_BASE_API.substring(
        0,
        process.env.VUE_APP_BASE_API.length - 1
      ),
      form: {
        jsfs: '',
        state: '',
        blurry: ''
      },
      serverList: []
    }
  },
  computed: {
    leftBack() {
      return { background: 'url(' + this.leftBg + ') no-repeat 100% 100%' }
    },
    rightBack() {
      return { background: 'url(' + this.rightBg + ') no-repeat 100% 100%' }
    },
  },
  created() {
    this.initService()
  },
  methods: {
    change(data) {
      this.active = data
      if (this.active === 0) {
        this.noticeTitle = '服务收藏'
      }
      if (this.active === 1) {
        this.noticeTitle = '文件收藏'
      }
      if (this.active === 2) {
        this.noticeTitle = '其他收藏'
      }
    },
    initService() {
      requestGet('rest/api/service/v1/all/analysis/pc/user/sc', {sfsc:1})
        .then(res => {
          const { data } = res
          this.serverList = data.data
        })
    },
    openEntity(data) {
      window.open(data,'_blank')
    }
  }
}
</script>

<template>
  <custom-fix-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :width="width"
    :modal="modal"
    :top="top"
    append-to-body
  >
    <div class="notice-dialog">
      <div class="notice-left" :style="leftBack">
        <div class="notice-left-header">
          <i class="el-icon-s-goods active-color" :style="activeColor" />
          <span class="header-title">我的收藏中心</span>
        </div>
        <div :class="active === 0 ? 'active':''" class="notice-ul-li" :style="activeColor" @click="change(0)">
          <i class="el-icon-menu" />
          <span class="li-title">服务收藏</span>
        </div>
<!--        <div :class="active === 1 ? 'active':''" class="notice-ul-li" :style="activeColor" @click="change(1)">
          <i class="el-icon-s-order" />
          <span class="li-title">文件收藏</span>
        </div>
        <div :class="active === 2 ? 'active':''" class="notice-ul-li" :style="activeColor" @click="change(2)">
          <i class="el-icon-share" />
          <span class="li-title">其他收藏</span>
        </div>-->
      </div>
      <div class="notice-body" :style='borderStyle'>
        <div class="notice-header">
          <el-radio-group v-model="radio">
            <el-radio-button :label="1"><i class="el-icon-menu" /></el-radio-button>
            <el-radio-button :label="2"><i class="el-icon-s-operation" /></el-radio-button>
          </el-radio-group>
        </div>
        <div class="notice-query">
          <div class="query-body">
            <el-input v-model="form.blurry" placeholder="请输入要查询的内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </div>
        </div>
        <div class="notice-content">
          <el-empty v-if="active !== 0" :image-size="200" />
          <div v-if="active === 0" class="notice-article">
            <div v-for="item in serverList" v-if="radio===1" :key="item.id" class="notice-ul-li-1">
              <div class="notice-li-body" @click="openEntity(item.openUrl)">
                <div class="li-image">
                  <el-image :src="baseURL+item.pcIcon" />
                </div>
                <div class="li-content">
                  <div class="li-title">{{ item.name }}</div>
                  <div class="li-footer">{{ item.ssxtmc }}</div>
                </div>
              </div>
            </div>
            <div v-for="item in serverList" v-if="radio===2" :key="item.id" class="notice-ul-li-2">
              <div class="notice-li-body" @click="openEntity(item.openUrl)">
                <div class="li-image">
                  <el-image :src="baseURL+item.pcIcon" />
                </div>
                <div class="li-content">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </custom-fix-dialog>
</template>

<style lang="scss" scoped>
.notice-dialog {
  width: 100%;
  height: 100%;
  display: flex;
  .notice-left {
    width: 200px;
    height: 100%;
    .notice-left-header {
      width: 100%;
      height: 50px;
      font-size: 1.1rem;
      line-height: 50px;
      text-align: center;
      font-weight: 600;
      .header-title {
        margin-left: 10px;
      }
      .active-color {
        color: var(--active-color);
      }
    }
    .notice-ul-li {
      cursor: pointer;
      width: 100%;
      height: 70px;
      line-height: 70px;
      text-align: center;
      font-size: 1.1rem;
      .li-title {
        margin-left: 5px;
      }
    }
    .notice-ul-li.active {
      background-color: var(--active-back);
      border-left: 3px solid var(--active-color);
    }
  }
  .notice-body {
    flex: 1 1;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    .notice-header {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: left;
      font-size: 1.1rem;
      font-weight: bold;
    }
    .notice-query {
      width: 100%;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #e2e2e2;
      .query-body {
        width: 300px;
      }
    }
    .notice-content {
      width: 100%;
      height: auto;
      .notice-article {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        .notice-ul-li-1 {
          width: 20%;
          height: 80px;
          padding: 10px;
          box-sizing: border-box;
          .notice-li-body {
            width: 100%;
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid #e4e4e4;
            padding: 5px;
            box-sizing: border-box;
            display: flex;
            .li-image {
              width: 50px;
              height: 50px;
              text-align: center;
              line-height: 50px;
              .el-image {
                width: 36px;
                height: 36px;
                margin-top: 7px;
              }
            }
            .li-content {
              flex: 1 1;
              height: 50px;
              .li-title {
                width: 100%;
                height: 25px;
                line-height: 15px;
              }
              .li-footer {
                height: 25px;
                line-height: 30px;
                width: 100%;
                font-size: 0.8rem;
                color: #909399;
              }
            }
          }
        }
        .notice-ul-li-2 {
          width: 20%;
          height: 50px;
          padding: 10px;
          box-sizing: border-box;
          .notice-li-body {
            width: 100%;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            padding: 5px;
            box-sizing: border-box;
            display: flex;
            .li-image {
              height: 30px;
              width: 30px;
              text-align: center;
              .el-image {
                width: 20px;
                height: 20px;
                margin-top: 5px;
              }
            }
            .li-content {
              flex: 1 1;
              height: 30px;
              line-height: 30px;
              text-indent: 5px;
              overflow: hidden;
              font-size: 0.8rem;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
</style>
